
var win = null;
var cvs = null;
var ctx = null;
var timer = null;
// var endTime = (new Date(2014, 9, 3)).valueOf();
var endTime = null;
var color = 'rgba(255, 102, 0, 1)';
var r = 1;
var R = r + 0.5;
var D = R * 2;
var W = 0;
var H = 0;
var X = 0;
var Y = 0;
var pi2 = Math.PI * 2;
var charWidth = 5 + 1;
var charHeigh = 7 + 1;


function main (evt) {
    win = window;
    cvs = document.getElementById('canvas');
    ctx = cvs.getContext('2d');
    if (!ctx) {
        return;
    }
    cvs.width = W = win.innerWidth;
    cvs.height = H = win.innerHeight;

    
    // var test = 'IBURNING.COM';
    // var rate = 2;
    // X = (W - (D * rate * charWidth * test.length - D * rate)) / 2;
    // Y = (H - D * rate * charHeigh) / 2 - D * rate * charHeigh;
    // for (var i = 0; i < test.length; i++) {
    //     drawChar(test[i], X + D * rate * i * charWidth, Y, color, rate);
    // }
    var timer = setInterval(function () {
        render(2);
    }, 30);

    // var testString = '0123456789';
    // marginX = D;
    // marginY = D * 10;
    // for (var i = 0; i < testString.length; i++) {
    //     drawChar(testString[i], marginX + D * 6 * i, marginY);
    // }
    // testString = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    // marginX = D;
    // marginY = D * 20;
    // for (var i = 0; i < testString.length; i++) {
    //     drawChar(testString[i], marginX + D * 6 * i, marginY);
    // }
    // testString = '`~!@#$%^&*()-_=+[]{}\\|;:\'"<>/?';
    // marginX = D;
    // marginY = D * 30;
    // for (var i = 0; i < testString.length; i++) {
    //     drawChar(testString[i], marginX + D * 6 * i, marginY);
    // }
}


function renderDate () {
    var currentTime = new Date();
    var weekDays = ['SUN', 'MON', 'TUE', 'WEN', 'THU', 'FRI', 'SAT'];
    var day = currentTime.getDay();
    w = 0;
    for (var i = 0; i < weekDays.length; i++) {
        weekDays[i] = weekDays[i] + ' ';
        for (var j = 0; j < weekDays[i].length; j++) {
            console.log(i, day);
            var dayColor = (i == day) ? color : 'rgba(255, 102, 0, 0.5)';
            drawChar(weekDays[i][j], 40 + D * w, 40, 0.3, dayColor);
            w += 6;
        }
    }

    var YYYY = currentTime.getFullYear();
    var MM = currentTime.getMonth() + 1;
    var DD = currentTime.getDate();
    MM = (MM < 10) ? ('0' + MM) : MM;
    DD = (DD < 10) ? ('0' + DD) : DD;
    var date = YYYY + '-' + MM + '-' + DD;
    w = 0;
    for (var i = 0; i < date.length; i++) {
        drawChar(date[i], 40 + D * w, 120, 0.35);
        w += 6;
    }
}

function render (rate) {
    ctx.clearRect(0, 0, win.innerWidth, win.innerHeight);

    var currentTime = new Date();
    var show = '';
    if (endTime) {  // cut down
        currentTime = currentTime.valueOf();
        var diffTime = parseInt((endTime - currentTime) / 1000);
        var hh = parseInt(diffTime / 3600);
        var mm = parseInt((diffTime - 3600 * hh) / 60);
        var ss = diffTime - 3600 * hh - 60 * mm;
        mm = (mm < 10) ? ('0' + mm) : mm;
        ss = (ss < 10) ? ('0' + ss) : ss;
        show = hh + ':' + mm + ':' + ss;
    } else {
        var currentTimeString = currentTime.toTimeString();
        show = (currentTimeString.split(' '))[0];
    }

    // ctx.font = '50px "League Gothic"';
    // ctx.fillStyle = '#fff';
    // ctx.fillText(show, 100, 100);
    X = (W - (D * rate * charWidth * show.length - D * rate)) / 2;
    Y = (H - D * rate * charHeigh) / 2;
    for (var i = 0; i < show.length; i++) {
        drawChar(show[i], X + D * rate * i * charWidth, Y, color, rate);
    }

    // var logo = 'IBURNING.COM';
    // var logoX = (win.innerWidth - D * 6 * logo.length) / 2;
    // var logoY = (win.innerHeight - D * 10);
    // w = 0;
    // for (var i = 0; i < logo.length; i++) {
    //     drawChar(logo[i], logoX + D * w, logoY, 1);
    //     w += 6;
    // }
}


function drawChar (charName, x, y, color, rate) {
    var data = charData[charName];
    if (!data) {
        return;
    }
    rate = rate || 1;
    data = resetData(data, rate);
    console.log('drawChar', charName, rate, data);
    for (var i = 0; i < data.length; i++) {
        for (var j = 0; j < data[i].length; j++) {
            if (1 == data[i][j]) {
                ctx.beginPath();
                ctx.arc(x + j * D + R, y + i * D + R, r, 0, pi2);
                ctx.fillStyle = color;
                ctx.fill();
            }
            // } else {
            //     ctx.beginPath();
            //     ctx.arc(marginX + j * D + R, marginY + i * D + R, r, 0, pi2);
            //     ctx.fillStyle = '#fff';
            //     ctx.fill();
            // }
        }
    }
}


function resetData (data, rate) {
    if (rate <= 1) {
        return data;
    }
    var newData = [];
    for (var I = 0; I < data.length * rate; I++) {
        var row = [];
        for (J = 0; J < data[0].length * rate; J++) {
            row.push(0);
        }
        newData.push(row);
    }
    for (var i = 0; i < data.length; i++) {
        for (var j = 0; j < data[i].length; j++) {
            var p = data[i][j];
            var I = i * rate;
            var J = j * rate;
            for (var x = 0; x < rate; x++) {
                for (var y = 0; y < rate; y++) {
                    newData[I + x][J + y] = p;
                }
            }
        }
    }
    return newData;
}


window.addEventListener('load', main);

// window.addEventListener('resize', function () {
//     cvs.width = win.innerWidth;
//     cvs.height = win.innerHeight;

//     marginX = (win.innerWidth - (D * 6 * 6 + D * 4 * 2 - D)) / 2;
//     marginY = (win.innerHeight - D * 7) / 2 - D * 4;

//     // renderDate();
// });








